<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地区选择</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1566901_07oyohn3uypw.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1566901_ys6j9fcmgc.css">
    <link rel="stylesheet" href="../css/tabbar.css" type="text/css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }
        a{
            background-color: #f3f3f3;
            display: inline-block;
            padding: 3px 19.4px;
        }
        .container {
            width: 100%;
            margin: 0 auto;
            margin-top: 30px;
            border: 1px solid #dddddd;
            border-radius: 1px;
        }
        #swipe {
            width: 100%;
        }

        #swipe img {
            width: 100%;
            height: 160px;
            padding:  1px;
        }

        input {
            display: none;
        }

        label {
            display: block;
            background-color: #c4c4c4;
            width: 99%;
            height: 50px;
            margin: 0 auto;
            border: 1px solid #dddddd;
            border-radius: 2px;
            margin-top: 10px;
            line-height: 50px;
            font-size: 40px;
        }

        .context {
            width: 99%;
            height: 0px;
            margin: 0 auto;
            border: 1px solid #dddddd;
            border-radius: 2px;
            visibility: hidden;
            transition: height 0.5s linear;
            -webkit-transition: height 0.5s linear;
            -moz-transition: height 0.5s linear;
            -ms-transition: height 0.5s linear;
        
        }

        input:checked+label+.context {
            visibility: visible;
            height: 200px;
        }

        .context ul li {
            float: left;
            font-size: 40px;
            list-style: none;
        }
        .context a{
            text-decoration: none;
            color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="swipe">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item><img src="../images/s_1.jpg"></van-swipe-item>
                <van-swipe-item><img src="../images/s_2.jpg"></van-swipe-item>
                <van-swipe-item><img src="../images/s_3.jpg"></van-swipe-item>
                <van-swipe-item><img src="../images/s_4.jpg"></van-swipe-item>
                <van-swipe-item><img src="../images/s_5.jpg"></van-swipe-item>
                <van-swipe-item><img src="../images/s_6.jpg"></van-swipe-item>
                <van-swipe-item><img src="../images/s_7.jpg"></van-swipe-item>
            </van-swipe>
        </div>
        <input type="radio" id="item1" name="item"><label for="item1">国内</label>
        <div class="context hiddenDiv" style="overflow: hidden;">

            <ul>
                <li>
                    <a href="">北京</a></li>
                <li>
                    <a href="">海南</a></li>
                <li>
                    <a href="">云南</a></li>
                <li>
                    <a href="">四川</a></li>
                <li>
                    <a href="">福建</a></li>
                <li>
                    <a href="">西藏</a></li>
                <li>
                    <a href="">上海</a></li>
            </ul>
        </div>
        <input type="radio" id="item2" name="item"><label for="item2">东南亚</label>
        <div class="context hiddenDiv" style="overflow: hidden;">
            <ul>
                <li>
                    <a href="">泰国</a></li>
                <li>
                    <a href="">东南亚</a></li>
                <li>
                    <a href="">南亚</a></li>
        </div>
        <input type="radio" id="item3" name="item"><label for="item3">港澳台</label>
        <div class="context hiddenDiv" style="overflow: hidden;">
            <ul>
                <li>
                    <a href="">香港</a></li>
                <li>
                    <a href="">澳门</a></li>
                <li>
                    <a href="">台湾</a></li>
        </div>
        <input type="radio" id="item4" name="item"><label for="item4">澳洲中东非</label>
        <div class="context hiddenDiv" style="overflow: hidden;">
            <ul>
                <li>
                    <a href="">澳洲</a></li>
                <li>
                    <a href="">中东</a></li>
                <li>
                    <a href="">非洲</a></li>
        </div>
        <input type="radio" id="item5" name="item"><label for="item5">日韩朝蒙</label>
        <div class="context hiddenDiv" style="overflow: hidden;">
            <ul>
                <li>
                    <a href="">日本</a></li>
                <li>
                    <a href="">韩国</a></li>
                <li>
                    <a href="">朝鲜</a></li>
                <li>
                    <a href="">蒙古</a></li>
        </div>
        <input type="radio" id="item7" name="item"><label for="item7">美洲</label>
        <div class="context hiddenDiv" style="overflow: hidden;">
            <ul>
                <li>
                    <a href="">美国</a></li>
        </div>
        <input type="radio" id="item8" name="item"><label for="item8">欧洲</label>
        <div class="context hiddenDiv" style="overflow: hidden;">
            <ul>
                <li>
                    <a href="">欧洲</a></li>
        </div>
        <div class="tabbar">
            <ul>
                <li><a href="../index.html"><span class="iconfont icon-shouye"></span>
                        <p>首页</p>
                    </a>
                </li>
                <li><a href="area.html">
                        <span class="iconfont icon-diqu"></span>
                        <p>地区</p>
                    </a>
                </li>
                <li><a href="life.html">
                        <span class="iconfont icon-shenghuo"></span>
                        <p>生活</p>
                    </a>
                </li>
                <li><a href="activity.html">
                        <span class="iconfont icon-huodong"></span>
                        <p>活动</p>
                    </a>
                </li>
                <li><a href="mine.html">
                        <span class="iconfont icon-wode"></span>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <script src="../script/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#swipe",
            data: {}
        })
    </script>
</body>

</html>